<script setup>
import { onMounted, reactive, ref, computed, onBeforeUnmount } from 'vue'
import { useStore } from 'vuex'
import { useRouter } from 'vue-router'
import empty from '@/assets/img/empty.png'
const router = useRouter()
const store = useStore()
store.commit('getInfect')
const common = store.state.common.obj
store.commit('getIsAnchor', common.userId >= 300000 && common.userId < 500000 ? true : false)
const api = store.state.api
// 中部按钮
let tabIndex = ref(0)
const tabClick = (index) => {
    if (tabIndex.value == index) return
    tabIndex.value = index
    onActive()
}
// 获取图片
const getAssetsImages = name => {
    return new URL(`../../assets/img/result/PC/${name}.png`, import.meta.url).href;
}
// 获取移动图片
const getAssetsImagesM = name => {
    return new URL(`../../assets/img/result/mobile/${name}.png`, import.meta.url).href;
}
let eleIndex = ref(0)
const enter = (i) => {
    if (eleIndex.value == i) return
    eleIndex.value = i
}
const onActive = () => {
    switch (tabIndex.value) {
        case 0:
            getAnchorList()
            break;
        case 1:
            getUserList()
            break;
        case 2:
            getGuildList()
            break;
        default:
            break;
    }
}
let timer
onMounted(() => {
    onActive()
    timer = setInterval(() => {
        onActive()
    }, 30 * 1000);
})
onBeforeUnmount(() => {
    clearInterval(timer)
})
// 主播榜单
let anchorList = reactive({
    result: []
})
const getAnchorList = async () => {
    await api.cycle2rank({ cycle: 1 }).then(res => {
        if (res.data.result) anchorList.result = res.data.result
    })
}
const anchor = computed(() => {
    return anchorList.result
})
const title = ['冠军', '亚军', '季军']
// 用户榜单
let userList = reactive({
    result: []
})
const getUserList = async () => {
    await api.userRank().then(res => {
        if (res.data.result) userList.result = res.data.result
    })
}
const user = computed(() => {
    return userList.result
})
// 工会榜单
let eleIndex1 = ref(0)
const enter1 = (i) => {
    if (eleIndex1.value == i) return
    eleIndex1.value = i
}
let guildList = reactive({
    result: []
})
const getGuildList = async () => {
    await api.unionRank().then(res => {
        if (res.data.result) guildList.result = res.data.result
    })
}
const guild = computed(() => {
    return guildList.result
})
// console.log(store.state.isiOS);
</script>

<template>
    <div class="home">
        <div class="header" />
        <div class="center">
            <ul class="tab">
                <li v-for="(item, index) in 3" :key="index" :class="{ active: tabIndex == index }"
                    @click="tabClick(index)" />
            </ul>
            <!-- 主播榜单 -->
            <div class="or-container" v-if="tabIndex == 0">
                <div class="box" :class="eleIndex == index ? 'eleactive' : ''" v-for="(item, index) in anchor.slice(0, 10)"
                    :key="index" @click="enter(index)">
                    <div class="info">
                        <p class="rank">{{ item.rankNo }}</p>
                        <img :src="item.ancPic || empty" alt="">
                        <p class="name"><span>{{ item.rankNo < 4 ? title[index] : '前十' }}主播 <i
                                    v-if="(store.state.isiOS  || store.state.isAndroid)== false">
                                    · </i></span><span>{{ item.anchorName }}</span></p>
                        <p class="add"></p>
                    </div>
                    <div class="info2">
                        <img v-if="store.state.isiOS||store.state.isAndroid" :src="getAssetsImagesM(index+1)" alt="">
                        <img v-else :src="getAssetsImages(index+1)" alt="">
                        <p class="anchorInfo">
                            <span>{{ item.rankNo < 4 ? title[index] : '前十' }}主播</span><span class="name">{{ item.anchorName
                            }}</span><span>ID:{{ item.anchorId }}</span>
                        </p>
                        <p class="rank">{{ item.rankNo < 10 ? '0' + item.rankNo : item.rankNo }}</p>
                    </div>
                </div>
            </div>
            <!-- 用户榜单 -->
            <ul class="userPart" v-if="tabIndex == 1">
                <li v-for="(item, index) in user" :key="index">
                    <div>
                        <img :src="item.userPic || empty" alt="">
                        <span>{{ item.rank < 4 ? title[index] : '第' + item.rank }}</span>
                    </div>
                    <p class="name">{{ item.userNickName || '酷炫牛人' }}</p>
                </li>
            </ul>
            <!-- 工会榜单 -->
            <div class="or-container guildBox" v-if="tabIndex == 2">
                <div class="box" :class="eleIndex1 == index ? 'eleactive' : ''" v-for="(item, index) in guild.slice(0, 5)"
                    :key="index" @click="enter1(index)">
                    <div class="info">
                        <p class="rank">{{ item.rankNo }}</p>
                        <img :src="item.lUPic || empty" alt="">
                        <p class="name"><span>{{ item.rankNo < 4 ? title[index] : '荣耀' }}公会 <i
                                    v-if="(store.state.isiOS|| store.state.isAndroid) == false">
                                    · </i></span><span>{{ item.lUNickName }}</span></p>
                        <p class="add"></p>
                    </div>
                    <div class="info2">
                        <p class="rank">
                            {{ item.rankNo < 10 ? '0' + item.rankNo : item.rankNo }} 
                        </p>
                        <p class="title">{{ item.rankNo < 4 ? title[index] : '荣耀' }}公会</p>
                        <div class="guildInfo">
                            <img :src="item.lUPic||empty" alt="">
                            <div>
                                <span class="name">{{ item.lUNickName }}</span>
                                <p class="score"><span>总联赛值</span><span>{{item.scores}}</span></p>
                            </div>
                        </div>
                        <p class="cutLine"></p>
                        <ul class="rankBox">
                            <li v-for="(item1,index1) in item.anchorList" :key="index1">
                                <div>
                                    <img :src="item1.ancPic||empty" alt="">
                                    <span></span>
                                </div>
                                <p class="name_id">
                                    <span class="name">{{item1.anchorName}}</span><span>ID:{{item1.anchorId}}</span>
                                </p>
                                <p class="score"><span>总联赛值</span><span>{{item1.scores}}</span></p>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
        <div class="ios" v-if="store.state.isiOS">本活动与苹果公司无关</div>
    </div>
</template>

<style lang='scss' scoped></style>